// !#1 引入 React 核心包
// import React from 'react'
// !#2 负责渲染的包（虚拟 DOM 转真实 DOM 并渲染）
import ReactDOM from 'react-dom/client'

// !#3 创建一个虚拟 DOM

const wrapEle = (
  <div
    style={{
      width: 100, // 单位是 px 可以省略
      height: '100px',
      lineHeight: '100px',
      backgroundColor: 'pink', // 属性名，小驼峰
      color: 'red',
      textAlign: 'center',
    }}
  >
    React
  </div>
)

// !#4 把虚拟 DOM 渲染到页面
// 渲染到哪儿、渲染谁
ReactDOM.createRoot(document.querySelector('#root')).render(wrapEle)
